<template>
  <div class="all">
    <div id="userList">
      <a-list id="listbaby" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item @click="showContent(item)">
            <a-space id="listbabyleft" style="margin-left: 10px">
              <a-avatar :size="40" :src="item.head" />
              <div>
                <div>{{ item.name }}</div>
                <div>你有 {{ item.content.length }} 条未读消息</div>
              </div>
            </a-space>
            <a-badge :count="item.content.length" />
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div id="body">
      <div id="show">
        <div id="top">
          <div style="text-align: center">{{ UserName }}</div>
        </div>
        <div id="middle" v-for="(item, index) in content" :key="index">
          <a-avatar :src="item.head" />
          <span>{{ item.content }}</span>
        </div>
      </div>
      <a-space id="utils">
        <a-button size="small" @click="remove">取消</a-button>
        <a-button size="small" @click="sendMs">发送</a-button>
      </a-space>
      <a-textarea v-model:value="MsValue" placeholder="" :rows="4" />
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import io from "../units/socket";
// import { doTalk } from "../../api/message";
// import { formatTime } from "../units/date";

export default defineComponent({
  setup() {
    const MsValue = ref("");
    const UserName = ref("");
    const content = ref([]);
    const data = ref([]);

    io.on("sendMsg1", (datas) => {
      //   console.log(datas);
      if (data.value.length == 0) {
        data.value.push({
          name: datas.name,
          head: datas.head,
          content: [datas.content],
        });
      } else {
        for (let i = 0; i < data.value.length; i++) {
          if (datas.name == data.value[i].name) {
            data.value[i].content.push(datas.content);
          } else {
            data.value.push({
              name: datas.name,
              head: datas.head,
              content: [datas.content],
            });
          }
        }
      }
    });

    const showContent = (item) => {
      //   console.log(item);
      UserName.value = item.name;
      for (let i = 0; i < item.content.length; i++) {
        content.value.push({
          head: item.head,
          content: item.content[i],
        });
      }
      item.content.length = 0;
    };

    const sendMs = () => {
      io.emit("sendMsg3", MsValue.value);
      content.value.push({
        head: "",
        content: MsValue.value,
      });
      MsValue.value = "";
    };

    const remove = () => {
      MsValue.value = "";
    };

    // console.log(route.query.uid);
    return {
      MsValue,
      UserName,
      remove,
      sendMs,
      content,
      data,
      showContent,
    };
  },
});
</script>
<style scoped>
.all {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 10px 0 0 20px;
  border: 1px solid rgb(131, 131, 131, 0.5);
}
#userList {
  width: 200px;
  height: 440px;
}
#listbaby {
  width: 100%;
  height: 60px;
}
#listbaby:hover {
  cursor: pointer;
}
#listbabyleft {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#body {
  border-left: 1px solid rgb(131, 131, 131, 0.5);
}
#show {
  width: 500px;
  height: 440px;
  border-bottom: 1px solid rgb(131, 131, 131, 0.5);
}
#top {
  height: 40px;
  padding-top: 8px;
  border-bottom: 1px solid rgb(131, 131, 131, 0.5);
}
#middle {
  margin: 5px 0 5px 5px;
}
#utils {
  float: right;
}
</style>